<template>
  <div>
    <div>
      <selectUser ref="selectUser" :showSelectUser="showSelectUser" 
      @hideSelectUser="hideSelectUser"
      @selectUserCallBack="selectUserCallBack"/>

      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="showSetAcl"
        v-if="showSetAcl"
        title="授权"
        width="500px"
      >
        <div>
          <div class="set-acl">
            <input type="checkbox" v-model="acls" value="R" />        
            <label>查看</label>
            <input type="checkbox"v-model="acls" value="M" />
            <label>管理</label>
            <input type="checkbox" v-model="acls" value="O" />
            <label>操作</label>
            <div slot="footer" class="dialog-footer">
              <el-button type="text" @click="confirmSetAcl">确定</el-button>
            </div>      
          </div>
        </div>
      </el-dialog>      


      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="aclName" label="权限" />
        <el-table-column v-permission="['admin','dict:edit','dict:del']" label="操作" width="130px" align="center" fixed="right">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :showEdit="false"
              :permission="permission"
              :customRowBtnObj="customRowBtnObj"
              @customMethod="openSetAcl"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSiteAcl from '@/api/iot/siteAcl'
import selectUser from '../../system/user/selectUser'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'

export default {
  components: { pagination, rrOperation, udOperation, selectUser },
  props: {
    sid: {
      type: Number,
      default: 0
    }
  },
  cruds() {
    return [
      CRUD({ title: '场所权限', url: 'iot/siteAcl', sort: ['id,asc'],
        crudMethod: { ...crudSiteAcl },
        optShow: {
          del: true,
          reset: false
        },
        queryOnPresenterCreated: false
      })
    ]
  },
  mixins: [
    presenter(),
    header()],
  data() {
    return {
      showSelectUser: false,
      showSetAcl: false, 
      setSiteAclObj: null, 
      permission: {
        add: ['admin', 'dict:add'],
        edit: ['admin', 'dict:edit'],
        del: ['admin', 'dict:del']
      },
      customRowBtnObj: {
        icon: "el-icon-setting",
        name: "授权"
      },
      acls: []
    }
  },
  methods: {
    openSelectUser() {
      this.showSelectUser = true
    },
    hideSelectUser() {
      this.showSelectUser = false
    },
    selectUserCallBack(data) {
      let reqData = {siteid: this.sid};
      let userIds = []
      data.forEach(user => {
        userIds.push(user.id)
      })
      reqData.userIds = userIds
      crudSiteAcl.batch(reqData).then(res => {
        // 刷新列表
        this.crud.refresh()
      })
    },
    openSetAcl(data) {
      if (data.acl) {
        this.acls = data.acl.split(",")  
      }
      this.showSetAcl = true
      this.setSiteAclObj = data
    },
    confirmSetAcl() {
      let acl = this.acls.join(",")
      this.setSiteAclObj.acl = acl
      crudSiteAcl.edit(this.setSiteAclObj).then(res => {
        this.setSiteAclObj = null
        this.showSetAcl = false
        this.acls = []
        this.crud.refresh()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  .set-acl {}
  .set-acl input {
    width: 20px;
    height: 20px;
  }
  .set-acl label {
    padding-right: 20px;
    font-size: 20px;
  }
  .set-acl .dialog-footer {
    margin-top: 20px
  }
</style>
